import { Divider, Form, Input, Button, Select, Space } from "antd";
const { Option } = Select;
import { LockOutlined, UserOutlined } from "@ant-design/icons";
const View = () => {
    const [form] = Form.useForm();
    const onFinish = (values) => {
        console.log("Success:", values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log("Failed:", errorInfo);
    };
    const onReset = () => {
        form.resetFields();
    };
    const onFill = () => {
        console.log(form);
        form.setFieldsValue({
            username: "admin",
            password: "123456",
            role: "admin",
        });
    };
    return (
        <>
            <Divider>
                <h3>基本使用</h3>
            </Divider>
            <Form
                style={{ width: 500 }}
                name='basic'
                form={form}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinish}
                onReset={onReset}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label='用户名'
                    name='username'
                    rules={[{ required: true, message: "请输入用户名" }]}
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item
                    label='密码'
                    name='password'
                    rules={[{ required: true, message: "请输入密码" }]}
                >
                    <Input.Password placeholder='请输入密码' />
                </Form.Item>
                <Form.Item
                    name='role'
                    label='角色'
                    rules={[{ required: true, message: "请选择角色" }]}
                >
                    <Select>
                        <Option value='admin'>管理员</Option>
                        <Option value='user'>普通用户</Option>
                    </Select>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Space>
                        <Button type='primary' htmlType='submit'>
                            登录
                        </Button>
                        <Button color='danger' variant='solid' htmlType='reset'>
                            重置
                        </Button>
                        <Button
                            variant='solid'
                            color='default'
                            onClick={onFill}
                        >
                            数据回填
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <Divider>
                <h3>三种布局</h3>
            </Divider>
            <Form form={form} layout='vertical' style={{ width: 500 }}>
                <Form.Item label='用户名'>
                    <Input
                        placeholder='请输入用户名'
                        prefix={<UserOutlined />}
                    />
                </Form.Item>
                <Form.Item label='密码'>
                    <Input.Password
                        placeholder='请输入密码'
                        prefix={<LockOutlined />}
                    />
                </Form.Item>
            </Form>
        </>
    );
};

export default View;
